<template>
  <ElSelect
    v-model="data.value"
    :placeholder="placeholder"
    clearable
    filterable
    :disabled="!data.isUse"
    :title="data.isDone || data.isView ? data.value : ''"
    @mousedown.left.native="onClick"
  >
    <ElOption
      class="fa-widget-select__option"
      v-for="(option, index) in data.selectOptions"
      :key="index"
      :value="option"
      :label="option"
      :title="option"
    />
  </ElSelect>
</template>

<script lang="ts">
import { computed, defineComponent, inject } from 'vue'
import { Viewer } from '@/types'
import { Widget } from '@/models'

/** 下拉选择控件 */
export default defineComponent({
  name: 'FaWidgetSelect',

  props: {
    /** 控件数据 */
    data: {
      type: Widget,
      required: true
    }
  },

  setup(props) {
    /** 合同控件 */
    const viewer = inject('Viewer') as Viewer

    return {
      /** 文本占位 */
      placeholder: computed(() => {
        const widget = props.data
        return widget.text.placeholder || `请选择${widget.displayName}`
      }),

      /** 点击 */
      onClick(e: MouseEvent) {
        if (props.data.isUse) return

        viewer.$emit('widget-click', props.data, e)
        viewer.$emit('widgets-click', [props.data], e)
      }
    }
  }
})
</script>

<style lang="scss">
.fa-widget-select {
  .el-select .el-input {
    width: 100%;
    height: 100%;
    font-size: inherit;

    .el-input__inner {
      height: 100%;
      padding: 0 20px 0 0;
      font-size: inherit;
      font-family: inherit;
      text-align: inherit;
      background: transparent;
      border: none;
    }

    &.is-disabled {
      .el-input__inner,
      .el-input__icon {
        cursor: inherit;
      }

      .el-input__inner {
        color: #606266;
      }
    }

    &__suffix {
      right: 0;
      background: transparent;
    }
  }
}

.el-select-dropdown:has(.fa-widget-select__option) {
  max-width: 80vw;
}
</style>
